<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">

<head>

<title>SAR: Sistema de Atención de Requerimientos</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" media="screen, projection"
	href="../static/styles/blueprint/screen.css" />

<link rel="stylesheet" type="text/css" media="print"
	href="../static/styles/blueprint/print.css" />

<link rel="stylesheet" type="text/css" media="screen"
	href="../static/styles/booking.css" />

<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"
	th:src="@{/resources/demos/style.css}" />

</head>

<body tiles:fragment="content">

		<h5>
			<span class="alt" th:text="#{programarSolicitudes.consultarProgramacion}">Solicitudes a Programar</span>
			> 
			<a href='/programarSolicitudes' th:href="@{'/programarSolicitud/' + ${solicitud.id}}"
			 th:text="#{programarSolicitudes.programacion}">Programación de Solicitud</a>
			>
			<span th:text="#{programarSolicitudes.revisarProgramacion}">Revisar Programacion</span>
		</h5>
		<hr />
	<h2>
		<p th:text="#{revisarProgramacion.titulo}">Revisar Programación</p>
	</h2>

	<div>
		<form action="#" th:object="${solicitud}" th:action="@{/enviarProgramacion}" method="post" class="inline">
			<input type="hidden"  th:value="${solicitud.id}" name="idSolicitud" />
			<fieldset>
					<div class="span-8">
						<label th:text="#{programarSolicitudes.numero}">Número de Solicitud </label>
						<input type="text" th:field="*{id}" disabled="true"/>
					</div>
					<div class="span-8 last">
						<label th:text="#{programarSolicitudes.horas}">Total de horas estimadas </label>
						<input type="text" th:field="*{totalHorasEstimadas}" disabled="true"/>
					</div>
					<div class="span-8">
						<label th:text="#{programarSolicitudes.cliente}">Cliente </label>
						<input type="text" th:field="*{solicitante.cliente.razonSocial}" disabled="true"/>
					</div>
					<div class="span-8 last">
						<label th:text="#{programarSolicitudes.fechaEntrega}">Fecha solicitada de entrega </label>
						<input type="text" th:value="${#dates.format(solicitud.fechaEsperada, #messages.msg('date.format'))}" disabled="true"/>
						<script type="text/javascript">
                            // <![CDATA[
                            Spring.addDecoration(new Spring.ElementDecoration({
                                elementId : "fechaEsperada",
                                widgetType : "dijit.form.DateTextBox",
                                widgetAttrs : { datePattern : "dd-MM-yyyy", required : true }}));
                            // ]]>
                        </script>
					</div>
					<div class="span-8">
						<label th:text="#{programarSolicitudes.tipoRequerimiento}">Tipo de requerimiento </label>
						<input type="text" th:field="*{tipoRequerimiento.nombre}" disabled="true"/>
					</div>
					<div class="span-8 last">
						<label th:text="#{programarSolicitudes.fechaRegistro}" >Fecha de registro</label>
						<input type="text" th:value="${#dates.format(solicitud.fechaRegistro, #messages.msg('date.format'))}" disabled="true" />
						<script type="text/javascript">
                            // <![CDATA[
                            Spring.addDecoration(new Spring.ElementDecoration({
                                elementId : "fechaRegistro",
                                widgetType : "dijit.form.DateTextBox",
                                widgetAttrs : { datePattern : "dd-MM-yyyy", required : true }}));
                            // ]]>
                        </script>
					</div>
					<div class="span-8">
						<label th:text="#{revisarProgramacion.fechaEstimadaEntrega}" >Fecha estimada de estrega</label>
						<input type="text" th:value="${#dates.format(solicitud.fechaEstimadaEntrega, #messages.msg('date.format'))}" disabled="true" />
					</div>
					
			</fieldset>

				<div id="tabs">
				  <ul>
				    <li th:each="fase : ${solicitud.fases}"><a href="#tabs-1" th:href="'#'+ ${fase.id}" th:text="${fase.nombre}">Fase X</a></li>				      
				  </ul>
				  <div th:each="fase : ${solicitud.fases}">	
					 <div th:id="${fase.id}" class="container">		
						<div class="span-8">
							<label th:text="#{programarSolicitudes.horasFase}">Total de horas estimadas </label>
							<label th:text="${fase.esfuerzoEstimado}">30</label>
							<br/>
							<label th:text="#{programarSolicitudes.horasFaseProgramadas}">Total de horas programadas </label>
							<label th:text="${fase.horasProgramadas}">0</label>
							<br/>
							<label th:text="#{programarSolicitudes.cantidadRecursos}">Recursos utilizados: </label>
							<label th:text="${fase.recursosUtilizados}">2</label>
							<br/>
						</div>
						<div class=" success span-8 last">
							<label th:text="#{programarSolicitudes.competenciaFase}" >Competencias Relacionadas</label>
						 <ul>
						    <li th:each="competencia : ${fase.competencias}" th:text= "${competencia.nombre}" >Fase X</li>				      
						 </ul>						 
						</div>						
					  </div>
				  </div>		
				</div>

			<div class="span-17">						
			<hr/>
			<h3>
				<p th:text="#{revisarProgramacion.calendario}">Calendario de Atención</p>
			</h3>
				<script th:inline="javascript">
				
				var cal;
				var date = new Date();
		        var d = date.getDate();
		        var m = date.getMonth();
		        var y = date.getFullYear();
				
					$(document).ready(function() {
		           
		            cal = $('#calendar').fullCalendar({
		                header: {
		                    left: 'prev,next today',
		                    center: 'title',
		                    right: 'month,agendaWeek,agendaDay'
		                },
		                editable: false,
		                monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio',
		                             'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
		                dayNames:   ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
		                monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
		                dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
		                defaultView: 'month',
		                allDaySlot: false,
		                firstHour: 8,
		                eventSources:   [
		              	    /*[[@{'/getCalendarioSolicitud/'+ ${solicitud.id}}]]*/
		                	,
		                	/*[[@{'/getRestringidos'}]]*/
		                ]
		            });
		         });	
				</script>
				<div id='calendar'></div>
			</div>						
			<a class="button positive" href="#" th:text="#{revisarProgramacion.revisar}" th:href="@{'/programarSolicitud/' + ${solicitud.id}}">Revisar</a>
			<button th:text="#{revisarProgramacion.enviar}" type="submit">Enviar Programación</button>
		</form>
	</div>
</body>

</html>
